<template>
  <div class="box">
    <van-form @submit="onRegister">
      <van-cell-group inset>
        <van-field
          v-model="user.username"
          name="用户名"
          label="用户名"
          placeholder="用户名"
          :rules="[{ required: true, message: '请填写用户名' }]"
        />
        <van-field
          v-model="user.password"
          type="password"
          name="密码"
          label="密码"
          placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' }]"
        />
        <van-field
          v-model="user.nickname"
          name="昵称"
          label="昵称"
          placeholder="昵称"
          :rules="[{ required: true, message: '请填写昵称' }]"
        />
        <van-field
          v-model="user.age"
          name="年龄"
          label="年龄"
          placeholder="年龄"
          :rules="[{ required: true, message: '请填写年龄' }]"
        />
        <van-field
          v-model="user.sex"
          name="性别"
          label="性别"
          placeholder="性别"
          :rules="[{ required: true, message: '请填写性别' }]"
        />
        <van-field
          v-model="user.fullname"
          name="真实姓名"
          label="真实姓名"
          placeholder="真实姓名"
          :rules="[{ required: true, message: '请填写真实姓名' }]"
        />
        <!-- <van-field name="uploader" label="文件上传">
          <template #input>
            <van-uploader v-model="user.headerimg" />
          </template>
        </van-field> -->
      </van-cell-group>
      <div style="margin: 16px" class="register_btn">
        <van-button round block type="primary" native-type="submit">
          注册
        </van-button>
      </div>
      <van-button plain type="primary" class="backStart" @click="backStart"
        >返回</van-button
      >
    </van-form>
  </div>
</template>

<script lang="ts" setup>
import { RequestReq } from "../hooks/index";
const { user, onRegister, backStart } = RequestReq();
</script>
<style lang="less" scoped>
.box {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: url(../../public/images/login.png) no-repeat;
  background-size: cover;
  //   background-color: aquamarine;
  .van-form {
    width: 450px;
    // background: rgba(213, 191, 191, 0.3);
    text-align: center;
    border-radius: 8px;
    padding: 30px 25px;
    margin-top: 45%;
    .register_btn {
      display: flex;
    }
    .backStart {
      width: 70px;
      height: 30px;
      border: none;
      //   background: rgba(225, 212, 212, 0.5);
      //   margin-top: 8%;
      margin-left: -90%;
    }
  }
}
</style>
